<template>
  <div class="items-center">
    <el-form :inline="true" :model="queryParams" class="demo-form-inline category-query-form">
      <!-- <el-form-item label="选择订单类别:" prop="user">
        <el-select style="width: 220px;" v-model="queryParams.user" placeholder="会展订单" clearable @keyup.enter="onSubmit">
          <el-option v-for="(item, index) in selecteList" :key="index" :label="item.lable" :value="item.value" />
        </el-select>
      </el-form-item> -->
      <el-form-item label="选择产品类别:" prop="cakeTypeId">
        <el-select style="width: 220px;" v-model="queryParams.cakeTypeId" placeholder="请选择种类款式" @change="handleChange"
          clearable @keyup.enter="onSubmitThrottling">
          <!-- <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" /> -->
          <el-option v-for="item in cakeList" :key="item.id" :label="item.cakeKnife" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="选择体量区间:" prop="interval">
        <!-- <el-input style="width: 145px;" v-model="queryParams.profit" placeholder="请输入" clearable
          @keyup.enter="onSubmit" /> -->
        <el-select style="width: 220px;" v-model="queryParams.interval" placeholder="请选择" clearable
          @keyup.enter="onSubmitThrottling" @change="handChange">
          <el-option v-for="item in mass" :key="item.id" :label="item.lable" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="选择默认配置" placeholder="请选择">
        <el-select v-model="cakeDefaultType" @change="handleSelectDefaultConfig" :disabled="isDefaultConfigDisabled"
          clearable>
          <el-option :label="'简配'" :value="1"></el-option>
          <el-option :label="'中配'" :value="2"></el-option>
          <el-option :label="'高配'" :value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分批发货:" prop="region">
        <el-input style="width: 220px;" v-model="queryParams.date" placeholder="1批" disabled clearable
          @keyup.enter="onSubmitThrottling" />
      </el-form-item>
    </el-form>
    <div class="items-top">
      <div class="item-left" ref="itemLeft">
        <div class="accessories-container" ref="accessoriesContainer">
          <div class="left">
            <el-row :gutter="20">
              <el-col class="selected-accessory-col" :span="6" v-for="(item, index) in cardList" :key="index">
                <section class="selected-accessory">
                  <!-- <el-button @click="deleteAccessory(item.id)" class="delete-accessory" type="danger" :icon="Minus" /> -->
                  <div class="delete-accessory" @click="deleteAccessory(item.id)"></div>
                  <img :src="item?.color?.materialUrl" style="width: 100%;" />
                  <p style="text-align: center;font-size: 13px;">{{ item.name + ' ' }} {{ item.color ?
                    item?.color?.materialName + ' ':'' }}</p>
                  <p style="text-align: center;font-size: 13px;">
                    <!-- {{ item?.weight ? item?.weight?.materialName+`${item.material ? ' | ':''}`:'' }} 
                      {{ item?.material ? item?.material?.materialName+`${item?.packing ? ' | ':''}`:'' }} 
                      {{ item?.packing ? item?.packing?.materialName+`${item?.quantity ? ' | ':''}`:'' }}
                      {{ item?.quantity ?+item?.quantity?.materialName+'个':' ' }} -->
                    {{ [item?.weight?.materialName || '', item?.material?.materialName || '',
                      item?.packing?.materialName || '', `${item?.quantity?.materialName ? item?.quantity?.materialName + '个' :
                    ''}`].join(' ') }}
                  </p>
                </section>
              </el-col>
            </el-row>
          </div>
          <div class="right">
            <div class="right-a">
              <el-form :inline="true" class="demo-form-inline" :model="queryParams">
                <el-form-item label="客户名称:" prop="custom">
                  <el-input style="width: 145px;" v-model="queryParams.custom" placeholder="请输入" clearable />
                </el-form-item>
                <el-form-item label="" prop="copes">
                  <!-- <el-select style="width: 145px;" v-model="queryParams.copes" placeholder="5人份" clearable
                    @change="checkOptionChange">
                    <el-option v-for="item in bleList" :key="item.id" :label="item.dictLabel" :value="item.dictValue" />
                  </el-select> -->
                </el-form-item>
                <el-form-item label="选择工艺:" prop="checkList">
                  <el-checkbox-group style="width: 320px;" v-model="queryParams.checkList" class="check"
                    @change="checkListGroupChange">
                    <el-checkbox v-for="(item, index) in projectType" :key="item.id" :label="item.dictLabel"
                      :value="item.dictValue" />
                    <!-- <el-checkbox label="冷烫" value="Value B" />
                    <el-checkbox label="反向UV" value="Value C" />
                    <el-checkbox label="压纹" value="Value D" />
                    <el-checkbox label="烫金" value="Value E" />
                    <el-checkbox label="镭射转印" value="Value D" />
                    <el-checkbox label="起鼓" value="Value E" /> -->
                  </el-checkbox-group>
                </el-form-item>
                <!-- <div class="packing">
                  <div>
                    装箱：
                  </div>
                  <div>
                    45/箱 
                  </div>
                </div> -->
              </el-form>
            </div>

            <div class="right-b">
              <div class="right-z">
                <div class="right-c">
                  <div style="font-size: 20px;font-weight: 600;color: #606266;">产品单价: {{ calculate }}</div>
                </div>
                <el-button class="priceButtonClass" type="primary" :style="{ color: 'white', borderColor: 'silver' }"
                  size="large" @click="onSubmitThrottling">
                  <p color="dark">生 成<br>报 价</p>
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="footer" v-if="accessories" ref="listContainer">
        <div class="footer-a" v-for="(item, index) in accessories.childCompositionVos" :key="index">
          <div class="footer-b">
            <div class="footer-c">
              {{ item.materialName }}
            </div>
            <!-- <div class="footer-d">
              <el-icon :size="20">
                <Minus />
              </el-icon>
            </div> -->
          </div>
          <el-row class="footer-e" :gutter="10">
            <el-col :span="12" class="footer-f" @click="handleClickAccessory(i, item)"
              v-for="i in item.childCompositionVos">
              <img style="width: 100%; border: 1px solid #efefef;cursor: pointer;border-radius: 6px;"
                :src="i.materialUrl" alt="">
              <div style="text-align: center;font-size: 14px;">{{ i.materialName }}</div>
              <!-- <div> {{ i.materialPrice }}</div> -->
            </el-col>
          </el-row>
        </div>
      </div>
      <!-- 点击右侧图片 弹出选择配件细节对话框 -->
      <el-dialog v-model="dialogVisible" :show-close="false" :title="selectedAccessory?.materialName"
        @close="handleCloseSelectAccsessory" width="650">
        <el-image style="width: 100%;height:260px"
          :src="confirmedAccessory?.color?.materialUrl ? confirmedAccessory?.color?.materialUrl : selectedAccessory?.materialUrl" />
        <div class="accsessory-color-list">
          <div :class="`accsessory-color ${item.id === confirmedAccessory?.color.id ? 'accessory-color-selected' : ''}`"
            v-for="item in selectedAccessory?.childCompositionVos?.filter((item: any) => {
              return item.materialName.includes('颜色')
            })[0]?.childCompositionVos" :key="item.id">
            <img :class="`accessory-color-image`" @click="handleSelectColor(item)" :src="item?.materialUrl"
              :key="item.id" alt="">
            <p class="accessory-color-name">{{ item?.materialName }}</p>
          </div>
        </div>
        <el-form ref="ruleFormRef" :model="confirmedAccessory" :rules="rules">
          <!-- <el-form-item v-if="selectedAccessory?.childCompositionVos?.some((item:any)=>{
                return item.materialName.includes('体量')
              })" label="体量" prop="volume">
              <el-select v-model="confirmedAccessory.volume" value-key= "id" clearable disabled >
                <el-option
                  v-for="item in selectedAccessory?.childCompositionVos?.filter((item:any)=>{
                    return item.materialName.includes('体量')
                  })[0]?.childCompositionVos"
                  :key="item.id"
                  :label="item.materialName"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item> -->
          <el-form-item v-if="selectedAccessory?.childCompositionVos?.some((item: any) => {
            return item.materialName.includes('材质')
          })" label="材质" prop="material">
            <el-select v-model="confirmedAccessory.material" value-key="id" clearable>
              <el-option v-for="item in selectedAccessory?.childCompositionVos?.filter((item: any) => {
                return item.materialName.includes('材质')
              })[0]?.childCompositionVos" :key="item.id" :label="item.materialName" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="selectedAccessory?.childCompositionVos?.some((item: any) => {
            return item.materialName.includes('克重')
          })" label="克重" prop="weight">
            <el-select v-model="confirmedAccessory.weight" value-key="id">
              <el-option v-for="item in selectedAccessory?.childCompositionVos?.filter((item: any) => {
                return item.materialName.includes('克重')
              })[0]?.childCompositionVos" :key="item.id" :label="item.materialName" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="selectedAccessory?.childCompositionVos?.some((item: any) => {
            return item.materialName.includes('包装方式')
          })" label="包装" prop="packing">
            <el-select v-model="confirmedAccessory.packing" value-key="id">
              <el-option v-for="item in selectedAccessory?.childCompositionVos?.filter((item: any) => {
                return item.materialName.includes('包装方式')
              })[0]?.childCompositionVos" :key="item.id" :label="item.materialName" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="selectedAccessory?.childCompositionVos?.some((item: any) => {
            return item.materialName.includes('数量')
          })" label="数量" prop="quantity">
            <el-select v-model="confirmedAccessory.quantity" value-key="id">
              <el-option v-for="item in selectedAccessory?.childCompositionVos?.filter((item: any) => {
                return item.materialName.includes('数量')
              })[0]?.childCompositionVos" :key="item.id" :label="item.materialName" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <div class="dialog-footer">
              <el-button type="primary" @click="handleConfirmSelect(ruleFormRef)">添加</el-button>
              <el-button @click="handleCloseSelectAccsessory">
                取消
              </el-button>
            </div>
          </el-form-item>
        </el-form>

      </el-dialog>
    </div>
  </div>
</template>
<script setup name="Order" lang="ts">
import { listCake, listCakeMaterial, orderList, massOrder, getDicts, getTotalPrices, massCount, getDefaultConfigById } from "@/api/sj/order";
import { getDefaultCakeConfig } from '@/api/sj/cake';
import './style.scss';
import type { FormRules, FormInstance } from 'element-plus'
import { Minus } from '@element-plus/icons-vue'
import { throttling } from '@/utils/optimization';


const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const listContainer = ref<any>(null);
const queryParams = ref<any>({
  user: '',
  region: '',
  interval: [],
  date: '',
  cakeTypeId: '',
  custom: '',
  copies: '',
  kezhong: '',
  shuliang: '',
  caizhi: '',
  type: '',
  tupian: '',
  checkList: [],
  copes: ''
});

const volumeDataList = ref<any[]>([]);
const activeVolume = ref<any>();

const dialogVisible = ref(false)
//选定各种参数的配件
const confirmedAccessory = reactive<any>({
  volume: {},
  fatherId: '',
  name: '',
  color: {},
  weight: '',
  packing: '',
  quantity: '',
  material: '',
  id: '',
  fatherName: ''
});

type selecteListType = {
  lable: string,
  value: string
}
// type intervalList = {
//   lable:string,
//   value:string
// }
const cardList = ref<any[]>([])
const accessoriesContainer = ref<any>(null);
const itemLeft = ref<any>(null);
const accessories = ref()
const cakeDefaultType = ref(undefined)
const isDefaultConfigDisabled = ref(true);
const defaultConfig = ref<any>();
const selecteList = ref<selecteListType[]>()
// const intervalList = ref<intervalList[]>()
const mass = ref<any[]>([])
const projectType = ref<any[]>([]);
const total = ref(0);
const loading = ref(true);
const cakeList = ref<any[]>([]);
const materialBos = ref<any[]>([]);
const bleList = ref()

//选中的配件
const selectedAccessory = ref<any>({});
const resetScroll = () => {
  if (listContainer.value) {
    listContainer.value.scrollTop = 0;
  }
};
watch(() => queryParams.cakeTypeId, () => {
  resetScroll();
});


const checkCount = ref([])
const checkListGroupChange = () => {
  console.log(queryParams.value.checkList)
  console.log(projectType.value)

  const result = queryParams.value.checkList.map((item: any) => {
    const obj: any = projectType.value.find((obj: any) => obj.dictLabel == item)
    return obj ? obj.dictValue : 0
  })

  checkCount.value = result
  console.log(checkCount.value)
}

// 体量区间价格
const massProfit = ref('')
//选择体量区间下拉框 区间id
const handChange = () => {
  console.log(queryParams.value.interval)
  console.log(mass.value)
  massProfit.value = mass.value.find((obj: any) => obj.id == queryParams.value.interval).profit
  console.log(massProfit.value)
}

/** 构造查询默认配置参数 */
// watch([queryParams,accessories],()=>{
//   if(queryParams.cakeDefaultType) defaultConfigParam.value.cakeDefaultType = queryParams?.cakeDefaultType;
//   if(accessories.value.id) defaultConfig.value.id = accessories?.value?.id;
//   // defaultConfigParam.value.cakeDefaultType = queryParams?.cakeDefaultType;
//   // defaultConfig.value.id = accessories?.value?.id;
// },{ deep: true, immediate: true });

const defaultConfigParam = computed(() => {
  return {
    cakeDefaultType: cakeDefaultType.value,
    id: accessories?.value?.id
  }
})

/** 选择默认配置 */
const handleSelectDefaultConfig = async (value: any) => {
  queryParams.cakeDefaultType = value;
  console.log('type', value, defaultConfigParam.value);
  if (value) {
    const { data } = await getDefaultConfigById(defaultConfigParam.value);
    defaultConfig.value = data;
    const defaultConfigArr = data.filter((accessory: any) => {
      if (accessory.name) {
        return accessory
      };
    });
    cardList.value = defaultConfigArr;
    // cardList.value = data;
  };
};
const checkOptionChange = () => {
  console.log(queryParams.value.copes)
}

const handleCloseSelectAccsessory = () => {
  dialogVisible.value = false;
  confirmedAccessory.fatherId = '';
  confirmedAccessory.color = {};
  confirmedAccessory.weight = '';
  confirmedAccessory.packing = '';
  confirmedAccessory.quantity = '';
  confirmedAccessory.material = '';
  confirmedAccessory.fatherName = '';
  confirmedAccessory.volume = {};
};

const ruleFormRef = ref<FormInstance>()
interface RuleForm {
  weight: any
  packing: any
  material: any
  quantity: any
}

const rules = reactive<FormRules>({
  weight: [
    { required: true, message: '克重不可为空' }
  ],
  packing: [
    { required: true, message: '包装方式不可为空' }
  ],
  quantity: [
    { required: true, message: '数量不可为空' }
  ],
  material: [
    { required: true, message: '材质不可为空' }
  ]
})

/** 点击弹窗操作 */
const handleClickAccessory = (accessory: any, fatherAccessory: any) => {
  dialogVisible.value = true;
  //是否是盒型
  console.log(accessory, fatherAccessory);
  selectedAccessory.value = { ...accessory, fatherId: fatherAccessory.id, fatherName: fatherAccessory.materialName };
  confirmedAccessory.id = selectedAccessory.value.id;
  confirmedAccessory.fatherId = selectedAccessory.value.fatherId;
  confirmedAccessory.name = selectedAccessory.value.materialName;
  confirmedAccessory.fatherName = selectedAccessory.value.fatherName;
  const colors = accessory?.childCompositionVos?.filter((item: any) => {
    return item?.materialName.includes('颜色');
  });
  if (colors.length) {
    confirmedAccessory.color = colors[0]?.childCompositionVos[0]
  };
}

/** watch选择的配件的父级配件名称 */
watch(confirmedAccessory, () => {
  // console.log('father name',confirmedAccessory.fatherName);
  if ((confirmedAccessory.fatherName == '蛋糕叉' || confirmedAccessory.fatherName == '蛋糕盘') && volumeDataList.value && confirmedAccessory.volume) {
    // console.log('confirmed',confirmedAccessory.quantity.materialName);
    // console.log('volume',volumeDataList.value);
    const matchedVolume = volumeDataList.value.filter((item: any) => item.materialName == confirmedAccessory.quantity.materialName)[0];
    console.log('matchedVolume', matchedVolume);
    if (matchedVolume) {
      activeVolume.value = matchedVolume;
    }

    //todo
    let boxIndex: number | null = null;
    cardList.value.forEach((item: any, index: number) => {
      if (item.fatherName.includes('盒型')) {
        boxIndex = index;
      };
    });
    if (boxIndex !== null) {
      if (cardList.value[boxIndex].volume && activeVolume.value) {
        // const boxInCardList = {...cardList.value[boxIndex]};
        // boxInCardList.volume = {...activeVolume.value};
        cardList.value[boxIndex].volume = { ...activeVolume.value };
      };
    };
  };
  // console.log('cardList',cardList.value);
}, { deep: true });

const handleConfirmSelect = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {

      let exsitedIndex = null;
      cardList.value.some((card, index) => {
        if (card.fatherId === confirmedAccessory.fatherId) {
          exsitedIndex = index
        };
        return card.fatherId === confirmedAccessory.fatherId;
      });
      if (!exsitedIndex && exsitedIndex !== 0) {
        cardList.value.push({ ...confirmedAccessory });
        exsitedIndex = null;

      } else {
        cardList.value.splice(exsitedIndex, 1, { ...confirmedAccessory });
        exsitedIndex = null
      }
      handleCloseSelectAccsessory();
    } else {
      console.log('error submit!', fields);
    }
  });
}

watch(() => cardList.value, () => {
  const accessoryInfo = cardList.value.map((card) => {
    console.log('card', card);
    const unitPrice = Number(card?.color?.materialPrice || 0) + Number(card?.material?.materialPrice || 0)
      + Number(card?.weight?.materialPrice || 0) + Number(card?.volume?.materialPrice || 0);
    const quantity = Number(card?.quantity?.materialName ? card.quantity?.materialName : 1);
    const packing_price = Number(card?.packing?.materialPrice || 0)
    const idList: any[] = [];
    for (let cardMaterial in card) {
      // console.log(cardMaterial);
      if (cardMaterial !== 'quantity' && card[cardMaterial]?.id) {
        // console.log('card[cardMaterial]',card[cardMaterial])
        idList.push(card[cardMaterial]?.id)
      }
    };
    if (idList.length !== 0) {
      return {
        id: idList.join(','),
        count: quantity
      };
    };
    // return {
    //   materialName: card.name,
    //   price: unitPrice,
    //   count: quantity,
    //   packing_price: packing_price
    // };
  });
  // accessoryInfo.forEach((item:any)=>{
  //   if(item) materialBos.value.push(item)
  // });
  materialBos.value = accessoryInfo.filter((item) => {
    if (item) return item
  });
  // console.log('accessoryInfo',accessoryInfo);
}, { deep: true, immediate: true });


//对话框中选择颜色
const handleSelectColor = (color: any) => {
  console.log(color);
  confirmedAccessory.color = { ...color };
};

// //底部数量输入框
// const input = ref('')
const calculate = ref('')
// /** 确认按钮操作 */
const onSubmit = async () => {
  // queryParams.value.value.pageNum = 1;
  // getList();
  // console.log(cardList.value);
  // const hasFork = cardList.value.some((item:any)=>{
  //   return item.fatherName == '蛋糕叉'
  // });
  // const hasPlate = cardList.value.some((item:any)=>{
  //   return item.fatherName == '蛋糕盘'
  // });
  // const shouldSubmit = hasFork && hasPlate;
  // if(shouldSubmit){
  //   const params = {
  //     styleId: queryParams.value.cakeTypeId,
  //     // intervalProfit: queryParams.value.interval,
  //     personCount: queryParams.value.copes,
  //     workmanShips: checkCount.value,
  //     materialBos: materialBos.value,
  //     intervalId: queryParams.value.interval
  //   }
  //   const res = await getTotalPrices(params)
  //   calculate.value = res.data
  // }else{
  //   proxy?.$modal.msgWarning("必须选择蛋糕叉与蛋糕盘配件");
  // };

  const params = {
    styleId: queryParams.value.cakeTypeId,
    // intervalProfit: queryParams.value.interval,
    personCount: queryParams.value.copes,
    workmanShips: checkCount.value,
    materialBos: materialBos.value,
    intervalId: queryParams.value.interval
  }

  try {
    const res = await getTotalPrices(params)
    calculate.value = res.data

  } catch (error) {
    calculate.value = '0.00'
  }
}

const onSubmitThrottling = throttling(onSubmit, 300);


//选择产品类别下拉框 类别id，查询配件
const handleChange = async () => {
  // console.log(queryParams.value.cakeTypeId, 'id')
  if (queryParams.value.cakeTypeId !== '' && queryParams.value.cakeTypeId !== null) {
    const { data } = await orderList(queryParams.value.cakeTypeId);
    accessories.value = data;
    // 设置默认盒型
    const boxData = data.childCompositionVos.filter((item: any) => item.materialName.includes('盒型'))[0];
    const colorData = boxData.childCompositionVos[0]?.childCompositionVos.filter((item: any) => item.materialName === '颜色')[0];
    const volumeData = boxData.childCompositionVos[0]?.childCompositionVos.filter((item: any) => item.materialName === '体量')[0];
    volumeDataList.value = volumeData?.childCompositionVos;
    // console.log('22222',volumeData?.childCompositionVos)
    const defaultBoxData = {
      color: colorData.childCompositionVos[0],
      id: boxData.childCompositionVos[0].id,
      volume: volumeData?.childCompositionVos[0] || {},
      name: boxData.childCompositionVos[0].materialName,
      fatherId: boxData.id,
      fatherName: boxData.materialName
    };
    cardList.value = [];
    cardList.value.push(defaultBoxData);
    calculate.value = '';
    cakeDefaultType.value = undefined;
    queryParams.value.interval = undefined;
  }
};

watch(() => accessories, () => {
  if (accessories.value) {
    isDefaultConfigDisabled.value = false;
  } else {
    isDefaultConfigDisabled.value = true;
  };
}, {
  deep: true, immediate: true
});

watch(() => confirmedAccessory.volume, () => {
  console.log(confirmedAccessory.volume);
})

/** 删除选择的配件 */
const deleteAccessory = (id: string | number) => {
  let deleteIndex = undefined;
  const shouldDel = cardList.value.some((item, index) => {
    if (item.id === id) deleteIndex = index;
    return item.id === id
  });
  if (shouldDel && deleteIndex || deleteIndex == 0) {
    cardList.value.splice(deleteIndex, 1);
  }
};


/** 查询蛋糕类型列表 */
const getList = async () => {
  loading.value = true;
  const res = await listCake(queryParams.Value);
  const orderres = await listCakeMaterial({ type: 'order_type' });
  selecteList.value = orderres.data
  cakeList.value = res.rows;
  total.value = res.total;
  loading.value = false;
}

//查询体量区间
const getListt = async () => {
  const res = await massOrder({ type: 'quantity_enum' })
  let rows = res.rows;
  // 对体量区间进行排序
  rows.sort((a: any, b: any) => {
    return a.sort - b.sort
  });
  mass.value = rows;
  // console.log( mass.value[0].id,'00000')
  const data = await getDicts('workmanship_type');
  projectType.value = data?.data;
  // console.log( projectType.value,'22222222222222222222')
  const date = await massCount('person_count');
  bleList.value = date.data
}


onMounted(() => {
  getList();
  getListt();
  // getProjectType();
  //选中产品类别第一个默认数据
});
</script>
<style scoped lang="scss">
//修改组件自带样式
::v-deep(.el-tabs__nav-scroll) {
  overflow-x: scroll !important;
  width: 450px !important;
}

// ::v-deep(.el-tabs__active-bar){
//     display: none !important;
//   }
::v-deep(.el-tabs__nav-wrap::after) {
  display: none !important;
}

.items-center {
  height: 100%;
  margin-top: 10px;
  margin-left: 15px;
  margin-right: 15px;
  position: relative;

  .el-form--inline .el-form-item {
    margin-right: 4px !important;
  }

  .el-input__wrapper {
    padding: 1px 5px !important;
  }

  .items-top {
    // margin-top: 10px;
    display: flex;
    height: 100%;

    // margin-top:50px;
    .item-left {
      width: 75%;
      overflow: visible;
      position: relative;

      .accessories-container {
        position: sticky;
        top: 20px;
      }

      .left {
        width: 100%;
        // width: 57vw;
        min-height: 60vh;
        // background-color: aqua;
        box-shadow: 5px 5px 5px #888888;
        border: 1px solid #999;
        border-radius: 10px;
        padding: 10px;
        padding-bottom: 0;

        .selected-accessory-col {
          margin-bottom: 20px;
        }

        .selected-accessory {
          border: solid 1px #888888;
          border-radius: 8px;
          height: 100%;
          padding: 5px;
          position: relative;

          // animation: shake 0.5s infinite;
          &:hover {
            cursor: pointer;
          }
        }

        .delete-accessory {
          position: absolute;
          top: -1px;
          right: -1px;
          width: 0;
          height: 0;
          border-left: 60px solid transparent;
          border-top: 60px solid rgba(255, 0, 0, 0.651);
          border-radius: 8px;

          &::after {
            content: '—';
            color: white;
            position: absolute;
            top: -50px;
            right: 10px;
            font-weight: bold;
          }
        }
      }

      .right {
        width: 100%;
        // width: 57vw;
        height: 23vh;
        margin-top: 10px;
        display: flex;
        border: 1px solid #999;
        border-radius: 10px;
        box-shadow: 5px 5px 5px #888888;
        // padding: 30px;
        padding: 4%;
        // margin-bottom: 20px;

        .right-a {
          // width: 585px;
          width: 50%;
          // height: 160px;
          height: 100%;

          .packing {
            display: flex;
            font-size: 16px;
            color: #606266;
            font-weight: bold;
          }
        }

        .right-b {
          width: 70%;
          height: 100%;
        }

        .right-z {
          //display: flex;
          // justify-content: space-between;
          // justify-content: center;
          margin-top: 1px;
          margin-right: 60%;
          width: 100%;
          height: 100%;

          .right-c {
            font-size: 18px;
            // font-weight: 700;
            color: #606266;
            font-weight: bold;
            margin-left: 45%;
            align-items: center
          }

          .priceButtonClass {
            margin-top: 20px;
            margin-left: 45%;
            background-color: rgb(255, 169, 80);
            color: white;
            border-color: silver;
            width: 100px;
            /* 设置按钮宽度 */
            height: 100px;
            /* 设置按钮高度 */
            border-radius: 10%;
            /* 使按钮边缘不圆润 */
            position: relative;
            overflow: hidden;
            font-size: 30px;
          }

          .right-d {
            margin-top: 5px;

            .right-e {
              margin-right: 80px;
            }
          }
        }

        .calPrice {
          margin-top: 10px;
        }
      }
    }

    .footer {
      width: 25%;
      // width: 21vw;
      // height: 590px;
      margin-left: 20px;
      margin-bottom: 30px;
      overflow-y: auto;

      .footer-a {
        padding: 5px;
        // width: 300px;
        border: 1px solid #999;
        border-radius: 10px;
        box-shadow: 5px 5px 5px #888888;
        // display: flex;
        // flex-direction: column;
        // justify-content: space-between;
        margin-bottom: 20px;
      }

      .footer-b {
        display: flex;
        justify-content: space-between;
      }

      .footer-c {
        font-size: 18px;
        color: #000000;
        // font-weight: 600;
      }

      .footer-d {
        cursor: pointer;
      }

      .footer-e {
        display: flex;
        overflow-y: auto;
        cursor: pointer;
        // justify-content: space-around;

        .footer-g {
          margin-left: 10px;
        }
      }


    }
  }

  .el-button--primary {
    width: 70px;
    height: 35px;
  }

  .el-input {
    width: 80% !important;
  }

  //弹框里tab标签页样式
  .demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
  }
}

@keyframes shake {
  0% {
    transform: translate(0);
  }

  25% {
    transform: (-10px -10px);
  }

  50% {
    transform: translate(10px 10px);
  }

  75% {
    transform: translate(-10px -10px);
  }

  100% {
    transform: translate(0);
  }
}
</style>